<ui:composition template="/resources/templates/editable.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:define name="block-header">
        <h:outputText value="#{msgs['block.add.role']}" styleClass="table_name"/>
    </ui:define>

    <ui:define name="editable-content">
        <h:form>
                <table width="100%" border="0">
                    <tr>
                        <td colspan="2" class="bottom_dotted"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="description">
                            <h:outputText value="#{msgs['rules.role.code']}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h:outputLabel value="#{msgs['code']}:" for="code" styleClass="margin1"/>
                        </td>
                        <td>
                            <h:inputText id="code" value="#{roleBean.code}"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="bottom_dotted"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="description">
                            <h:outputText value="#{msgs['rules.role.name']}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h:outputLabel value="#{msgs['name']}:" for="name" styleClass="margin1"/>
                        </td>
                        <td>
                            <h:inputText id="name" value="#{roleBean.name}"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="bottom_dotted"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="description">
                            <h:outputText value="#{msgs['rules.role.description']}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h:outputLabel value="#{msgs['description']}:" for="description" styleClass="margin1"/>
                        </td>
                        <td>
                            <h:inputText id="description" value="#{roleBean.description}"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="bottom_dotted"></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <h:commandButton action="#{rolesController.addRole}" title="#{msgs['save']}"
                                             value="#{msgs['save']}"
                                             styleClass="margin2p"/>
                            <h:button outcome="/admin/rolesPage" title="#{msgs['cancel']}" value="#{msgs['cancel']}"
                                      styleClass="margin2p"/>
                        </td>
                    </tr>
                </table>
        </h:form>
    </ui:define>
</ui:composition>